<template>
  <div>
    <el-table-form ref="form" :max-cols="4" :model="query">

      <el-form-item label="条件类型:" :table-form-merge="1.5" class="merge-item">
        <!-- <el-select v-model="query.type">
          <el-option value="contactPhone" label="电话">电话</el-option>
          <el-option value="csmCode" label="客户编号">客户编号</el-option>
          <el-option value="csmName" label="客户名称">客户名称</el-option>
        </el-select>
        <el-input v-model.trim="query.csmText" placeholder="请输入" clearable @keyup.enter.native="search" /> -->
        <el-input v-model.trim="query.csmText" placeholder="请输入" @keyup.enter.native="search">
          <el-select slot="prepend" v-model="query.type" style="width: 100px;" placeholder="请选择">
            <el-option value="contactPhone" label="电话">电话</el-option>
            <el-option value="csmCode" label="客户编号">客户编号</el-option>
            <el-option value="csmName" label="客户名称">客户名称</el-option>
            <el-option value="sfzh" label="身份证">身份证</el-option>
          </el-select>
          <!-- <el-button slot="append" class="append-search" @keyup.enter.native="search">查询</el-button> -->
        </el-input>
      </el-form-item>
      <el-form-item label="生效范围:" prop="orgSNNo">
        <el-tree-select
          v-model="query.scopeOrgSNNo"
          :clearable="false"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
            loading: $loadingPlugin.getTreeData
          }"
          :tree-params=" {
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props:{
              value:'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>
      <template v-slot:btns>
        <el-button v-permission="[10020301,1]" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button v-permission="[10020301,2]" type="primary" style="margin-right: 5px;" icon="el-icon-plus" @click="add">新增调价</el-button>
        <el-button v-permission="[10020301,3]" type="primary" icon="el-icon-download" :loading="$loadingPlugin.exportFile" @click="exportFile">导出</el-button>
      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      v-el-height-adaptive-table="{bottomOffset:10}"
      border
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      highlight-current-row
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <waitAudit ref="waitAudit" :parent-fetch-data="refresh" />
    <addPrice ref="addPrice" :tree-org-data="treeData" :parent-fetch-data="refresh" />
  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { CmsSpecialPrice, specialPriceCsmExport } from '@/api'

  export default {
    name: 'cmsOrientedMode',
    components: {
      waitAudit: require('./waitAudit.vue').default,
      addPrice: require('./addprice.vue').default
    },
    props: {
      exportDomain: {
        type: String
      }
    },
    data() {
      return {
        query: {
          type: 'contactPhone',
          csmText: ''
        },
        tableData: {
          data: [],
          column: [
            // { label: '客户id', prop: 'csmId', hidden: true },
            // { label: '生效机构伪码', prop: 'scopeOrgSNNo', hidden: true },
            { type: 'index' },
            { label: '客户名称', prop: 'csmName', width: 120 },
            { label: '生效机构', prop: 'scopeOrgName', width: 150 },
            { label: '待审核数', prop: 'uncheck', width: 120, align: 'right',
              render: (h, { row }) => row.uncheck * 1 > 0 ? <span onClick={() => { this.openWaitAudit(row) }} style={'cursor: pointer; color:blue'}>{row.uncheck }</span> : <span>{row.uncheck}</span>
            },
            { label: '已审核数', prop: 'checked', width: 120, align: 'right' },
            { label: '已驳回数', prop: 'rejected', width: 120, align: 'right' },
            { label: '客户编号', prop: 'csmCode', width: 120 },
            { label: '客户电话', prop: 'contactPhone', width: 150 },
            { label: '客户地址', prop: 'csmAddress' },
            { label: '身份证', prop: 'sfzh', width: 180 },
            { label: '操作', width: 50,
              render: (h, { row }) => <el-link v-permission={[10020301, 4]} underline={false} onClick={() => this.openEdit(row)}>编辑</el-link>
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getTreeData()
    },

    methods: {
      // 获取所属机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.orgSNNo = value.orgSNNo
      },
      search() {
        // this.fetchData({})
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },

      // 编辑
      openEdit(row) {
        this.$refs.addPrice.open({ ...row })
      },
      openWaitAudit(row) {
        // console.log(row)
        this.$refs.waitAudit.open(row)
      },
      // 新增报价
      add() {
        this.$refs.addPrice.open()
      },
      // 导出
      async exportFile() {
        this.$confirm(`确定导出数据？`, '提示', {
          type: 'warning'
        }).then(() => {
          var list = JSON.parse(JSON.stringify(this.tableData.column))
          list.pop()
          const value = {}
          list.forEach(l => {
            value[l.prop] = l.label
            return value
          })
          const params = {
            kv: value,
            paramData: {
              scopeOrgSNNo: this.query.scopeOrgSNNo
            }
          }
          params['paramData'][this.query.type] = this.query.csmText
          specialPriceCsmExport(params).then((res) => {
            window.open(`${this.exportDomain}/page/export/frame?key=${res.data}`, '_blank')
          })
        })
      },
      refresh() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          scopeOrgSNNo: this.query.scopeOrgSNNo,
          currentPage,
          pageSize
        }
        params[this.query.type] = this.query.csmText
        const res = await CmsSpecialPrice(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style scoped>

</style>
